{extend name='common/base'/}
{block name='css'}
<link rel="stylesheet" href="/static/frontend/css/article.min.css" media="all">
{/block}
{block name='content'}
<main class="main m-b-15 container clearfix d-flex">
    <div class="main-article-left m-b-15">
        <div class="main-article-left-title bg-white">
            <p>{$article_info.title}</p>
            <div class="main-article-left-title-info-list d-flex">
                <a href="javascript:;">
                    <i class="icon icon-auth"></i>
                    <span class="text-success">
                          {$article_info.author}
                        </span>
                </a>
                <a href="javascript:;">
                    <i class="icon icon-time"></i>
                    <span class="text-warning">
                           {$article_info.publish_time?:$article_info.create_time}
                        </span>
                </a>
                <a href="javascript:;">
                    <i class="icon icon-like"></i>
                    <span class="text-blue">
                        {$article_info.like}
                        </span>
                </a>
                <a href="javascript:;">
                    <i class="icon icon-comment"></i>
                    <span class="text-orange">
                            {$article_info.comments_count}
                        </span>
                </a>
            </div>
            <div class="main-article-left-line">
                <div class="main-article-left-line-position"></div>
            </div>
        </div>
        <div class="main-article-left-info bg-white m-b-10">
            {$article_info.content|htmlspecialchars_decode}
            <div class="main-article-left-info-tag bg-white d-flex m-t-15 m-b-10">
                <span>标签：</span>
                <div class="main-article-left-info-tag-list d-flex">
                    {foreach $article_info.tag as $k=>$v}
                    <a href="{:url('search_index',['k'=>$v])}">#{$v}#</a>
                    {/foreach}
                </div>
            </div>
        </div>

        <div class="main-article-left-other bg-white m-b-10 d-flex">
            <a href="{$prev['url']}" class="main-article-left-other-a">上一篇:{$prev['title']}</a>
            <a href="{$next['url']}" class="main-article-left-other-a">下一篇:{$next['title']}</a>
        </div>
        <div class="main-comment bg-white m-b-10" id="comment">
            <form action="" class="layui-form d-flex main-comment-form">
                <!-- 各种id -->
                <!--文章id相册id-->
                <input type="hidden" name="goal_id" value="{$article_info.id}">
                <!--当前登录的用户id-->
                <input type="hidden" name="user_id" value="{$user_info.id??'-1'}">
                <!--评论上级id-->
                <input type="hidden" name="pid" value="0">
                <!--回复人信息-->
                <input type="hidden" name="reply_user_id" value="0">
                <input type="hidden" name="reply_user_name" value="">
                <!--类型-->
                <input type="hidden" name="goal_type" value="article">

                <div class="layui-form-item main-comment-form-item">
                        <textarea name="content" class="layui-textarea main-comment-form-item-textarea"
                                  placeholder="多少说点什么吧" lay-reqText='多少说点什么吧' lay-verify="required"></textarea>
                </div>
                <div class="layui-form-item d-flex clearfix">
                    <!-- 未登录时显示 -->
                    {if !isset($user_info)}
                    <input type="text" name="nick_name" lay-verify="required" title="不想登陆？那就取个响亮的名字吧"
                           lay-reqText='给自己取一个响亮的名字'
                           placeholder="请输入昵称"
                           value="" class="layui-input">
                    {/if}
                </div>
                <div class="layui-form-item d-flex clearfix">
                    <button class="layui-btn layui-btn-danger comment-push m-t-5" lay-submit lay-filter="form_submit">
                        发表评论
                    </button>
                    <button class="layui-btn layui-btn-primary comment-cancel m-t-5 layui-hide"
                            type='button'>取消
                    </button>
                </div>
            </form>
        </div>
        <div class="main-comment-list bg-white" id="main-comment-list">
            <div class="main-comment-list-title d-flex">
                <span>评论列表</span>
            </div>

            <div class="main-comment-list-load-more d-flex" id="comment-list-footer">
                <button class="layui-btn layui-btn-normal layui-btn-xs" id="load-more" data-next-page="1"
                        data-max-page="1">加载更多
                </button>
            </div>
        </div>
    </div>
    <div class="main-article-right m-b-15">
        <div class="main-article-right">
            {include file='common/author'}
            {include file='common/ranking'}
            {include file='common/tag_list'}
        </div>
    </div>
</main>

{/block}
{block name='js'}
<script src="/static/frontend/js/read.js"></script>
<script id="comment-list-tpl" type="text/html">
    {{# if(d.data.list.length === 0){ }}
    <div class="main-comment-list-nomore">
        <div class="empty d-flex">
            <span class="icon icon-empty d-block m-b-15"></span>
            <em>暂无评论,赶紧抢沙发吧...</em>
        </div>
    </div>
    {{#  }else{ }}
    {{# layui.each(d.data.list,function(index,item){ }}
    <div class="main-comment-list-box">
        <div class="main-comment-list-box-user">
            <a href="" class="main-comment-list-box-user-avatar">
                {{# if(item.user!=null){ }}
                <img src="{{item.user.avatar}}" 1 onerror="this.src='/static/frontend/img/header.png'" alt="">
                {{# }else{ }}
                <img src="/static/frontend/img/header.png" 2 alt="">
                {{# } }}
            </a>
            <div class="main-comment-list-box-user-info">
                {{# if(item.user!=null){ }}
                <p class="main-comment-list-box-user-info-nickname">{{item.user.nick_name}}</p>
                {{# }else{ }}
                <p class="main-comment-list-box-user-info-nickname">{{item.nick_name}}</p>
                {{# } }}
                <div class="main-comment-list-box-user-info-content">
                    {{item.content}}
                </div>
                <div class="main-comment-list-box-user-info-bottom" data-pid="{{item.id}}"
                     data-reply-user-id="{{item.user_id}}" data-reply-user-name="{{item.nick_name}}">
                    <a class="main-comment-list-box-user-info-bottom-reply comment-reply-btn right">回复</a>
<!--                    <a class="main-comment-list-box-user-info-bottom-like comment-like-btn right">赞({{item.like}})</a>-->
                    <a class="main-comment-list-box-user-info-bottom-time right">{{item.create_time_text}}</a>
                    <a class="main-comment-list-box-children-replylist-bottom-report comment-report-btn right">举报</a>
                </div>
            </div>
        </div>

        <div class="main-comment-list-box-children">
            {{# layui.each(item.comments,function(key,value){ }}
            <div class="main-comment-list-box-children-replylist m-b-25">
                <div class="main-comment-list-box-children-replylist-avatar">
                    {{# if(value.repleyuser!=null){ }}
                    <img src="{{value.repleyuser.avatar}}" 1 onerror="this.src='/static/frontend/img/header.png'"
                         alt="">
                    {{# }else{ }}
                    <img src="/static/frontend/img/header.png" 2 alt="">
                    {{# } }}
                </div>
                <div class="main-comment-list-box-children-replylist-content">
                    {{# if(value.user!=null){ }}
                    <a class="main-comment-list-box-children-replylist-content-nickname">{{value.user.nick_name}}</a>
                    {{# }else{ }}
                    <a class="main-comment-list-box-children-replylist-content-nickname">{{value.nick_name}}</a>
                    {{# } }}
                    <span>回复</span>
                    {{# if(value.repleyuser!=null){ }}
                    <a class="main-comment-list-box-children-replylist-content-nickname">{{value.repleyuser.nick_name}}
                    </a>
                    {{# }else{ }}
                    <a class="main-comment-list-box-children-replylist-content-nickname">{{value.reply_user_name}}
                    </a>
                    {{# } }}
                    <span>{{value.content}}</span>
                </div>
                <div class="main-comment-list-box-children-replylist-bottom" data-pid="{{item.id}}"
                     data-reply-user-id="{{value.user_id}}" data-reply-user-name="{{value.nick_name}}">
                    <a class="main-comment-list-box-children-replylist-bottom-reply comment-reply-btn right">回复</a>
<!--                    <a class="main-comment-list-box-children-replylist-bottom-like comment-like-btn right">赞({{value.like}})</a>-->
                    <a class="main-comment-list-box-children-replylist-bottom-time right">{{value.create_time_text}}</a>
                    <a class="main-comment-list-box-children-replylist-bottom-report comment-report-btn right">举报</a>
                </div>
            </div>
            {{# }); }}
        </div>
        {{# if(item.comments_count>4){ }}
            <div class="main-comment-list-load-more d-flex">
                <span class="show">——点击展开——</span>
            </div>
        {{# } }}
    </div>
    {{#  }); }}
    {{# } }}
</script>

<script id="comment-children-tpl" type="text/html">
        {{# layui.each(d.data.list,function(key,value){ }}
        <div class="main-comment-list-box-children-replylist m-b-25">
            <div class="main-comment-list-box-children-replylist-avatar">
                {{# if(value.repleyuser!=null){ }}
                <img src="{{value.repleyuser.avatar}}" 1 onerror="this.src='/static/frontend/img/header.png'"
                     alt="">
                {{# }else{ }}
                <img src="/static/frontend/img/header.png" 2 alt="">
                {{# } }}
            </div>
            <div class="main-comment-list-box-children-replylist-content">
                {{# if(value.user!=null){ }}
                <a class="main-comment-list-box-children-replylist-content-nickname">{{value.user.nick_name}}</a>
                {{# }else{ }}
                <a class="main-comment-list-box-children-replylist-content-nickname">{{value.nick_name}}</a>
                {{# } }}
                <span>回复</span>
                {{# if(value.repleyuser!=null){ }}
                <a class="main-comment-list-box-children-replylist-content-nickname">{{value.repleyuser.nick_name}}
                </a>
                {{# }else{ }}
                <a class="main-comment-list-box-children-replylist-content-nickname">{{value.reply_user_name}}
                </a>
                {{# } }}
                <span>{{value.content}}</span>
            </div>
            <div class="main-comment-list-box-children-replylist-bottom" data-pid="{{value.pid}}"
                 data-reply-user-id="{{value.user_id}}" data-reply-user-name="{{value.nick_name}}">
                <a class="main-comment-list-box-children-replylist-bottom-reply comment-reply-btn right">回复</a>
<!--                <a class="main-comment-list-box-children-replylist-bottom-like comment-like-btn right">赞({{value.like}})</a>-->
                <a class="main-comment-list-box-children-replylist-bottom-time right">{{value.create_time_text}}</a>
                <a class="main-comment-list-box-children-replylist-bottom-report comment-report-btn right">举报</a>
            </div>
        </div>
        {{# }); }}
</script>

{/block}
